<template>
	<view class="box1">
		<Title :txt="title" :showback="true"></Title>
		<view class="selecttab mgt20 fsc">
			<view :class="[index==0?'active':'noactive','item', 'f14']" @click="select(0)">
				{{i18n.qb}}
			</view>
			<view :class="[index==1?'active':'noactive','item', 'f14']"  @click="select(1)">
				{{i18n.sjz}}
			</view>
			<view :class="[index==2?'active':'noactive','item', 'f14']"  @click="select(2)">
				{{i18n.fzq}}
			</view>
			<view :class="[index==3?'active':'noactive','item', 'f14']"  @click="select(3)">
				{{i18n.wkz}}
			</view>
			<view :class="[index==4?'active':'noactive','item', 'f14']"  @click="select(4)">
				{{i18n.ydq}}
			</view>
		</view>
		
		<view>
			<null v-if="list.length<=0"></null>
			<view v-else>
				<view class="list mt15 ml15 mr15 pd12" @click="gotoEquipDetail(eitem.orderId)" v-for="(eitem,eindex) in list" :key="eitem.id">
					<view class="fsc">
						<view class="f12 textcolor">
							{{eitem.orderId}}
						</view>
						<view class="f12 textcolor">
							{{eitem.createDate}}
						</view>
					</view>
					<view class="fcs mt16">
						<image src="../../static/banner.png" mode="" style="width: 144rpx;height: 144rpx;margin-right: 32rpx;"></image>
						<view class="fcff">
							<view class="f16 white">
								{{eitem.name}}
							</view>
							<view class="mt8 f12 textcolor">
								{{i18n.ccrl}}/{{i18n.ddzrl}}： {{eitem.sumStorageCapacity}} T
							</view>
							<view class="fsc mt3">
								<view class="">
									<view class="fsc">
										<view class="f12 textcolor">
											{{i18n.danjia}}：
										</view>
										<view class=" f12 textcolor">
											{{eitem.price}} USDT
										</view>
									</view>
									
								</view>
								<view class="f14 obcolor po">
									x{{eitem.number}}
								</view>
							</view>
						</view>
						
					</view>
					<view class="fcc f12 white mt10 mb5">
						<text>{{i18n.yfz}}/{{i18n.ddzrl}}：{{eitem.hasFzStorageCapacity}}T/{{eitem.storageCapacity}}T</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
			list:[
				],
				status:0,
				index:0,
				title:'',
				mineid:''
			}
		},
		onLoad(options) {
			this.title=options.name
			this.mineid = options.id
		},
		onShow() {
			this.getList()
		},
		computed:{
			i18n() {
				return this.$t('home');
			}
		},
		methods:{
			select(index){
				this.index=index
				this.getList()
			},
			gotoEquipDetail(id){
				uni.navigateTo({
					url:"./equipdetail?id="+id
				})
			},
			getList(){
				if(this.index=="0"){
					var params={
						mineId:this.mineid,
						status:""
					}
				}
				else{
					var params={
						mineId:this.mineid,
						status:this.index
					}
				}
				this.$http.post("index.getUserOrderList",params).then(res=>{
					this.list=res.data
				})
			}
		}
	}
</script>

<style lang="less">
	.box1{
		.selecttab{
			padding: 0 18rpx;
			.item{
				padding: 0 20rpx 14rpx 20rpx;
			}
			.active{
				color: #1372DF;
				border-bottom: 2rpx solid #1372DF;
			}
			.noactive{
				color: #C9CDD6;
			}
		}
		.list{
			opacity: 1;
			background: #121D2C;
			border-radius: 24rpx;
			margin-left: auto;
			margin-right: auto;
			position: relative;
			.po{
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

.register {
	margin-top: 60rpx;
	.back {
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 34rpx;
		margin-left: 30rpx;
		position: relative;
		.leftarrow {
			position: absolute;
			left: 0;
			top: 0;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.chrecord {
		position: absolute;
		top: 0;
		right: 0;
		margin-right: 30rpx;
		color:#586471;
	}
}
.textcolor{
	color:#586471;
}
.pd12{
	padding: 12px !important;
}
.obcolor{
	color:#007AFF;
}
</style>
